feat(blog): giscus 기반 댓글 기능#79
Merged
Merged
Conversation
- src/constants/giscus.ts: 설정값 상수 분리(VITE_GISCUS_* override) + buildGiscusAttributes() 순수 함수 - src/components/Giscus.tsx: useEffect로 client.js 동적 주입, useTheme 다크모드 연동(postMessage), pathname 매핑 - src/routes/blog.$slug.tsx: 글 하단에 Giscus 위젯 렌더(key=slug로 글 전환 시 재마운트) - src/constants/giscus.test.ts: 속성/매핑/언어/옵션/테마 단위 테스트
코드리뷰 반영:
- 글마다 재마운트(key={slug})하면 client.js가 매번 재실행돼 window message
리스너가 누적되던 문제 → Giscus를 한 번만 마운트하고 글·테마 전환은
iframe에 setConfig 메시지로 갱신. pathname→term 계산은 client.js와 동일.
- iframe load 시점에 현재 설정을 재전송해, 로딩 중 테마 토글이 유실되던
레이스를 보정(MutationObserver로 iframe 감지 → load 핸들러).
- dev 모드에서 repoId/categoryId 미설정 시 console.warn 가드 추가.
- pathnameToTerm 순수 함수 분리 + 단위 테스트 추가.
- 장황한 주석 정리.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Ready View logs |
daleui | b8a866c | Commit Preview URL | Jun 26 2026, 09:45 AM |
- import 정렬(sort-imports): GISCUS_* 를 앞으로 - 렌더 중 ref 변경(react-hooks) 해소: configRef 갱신을 effect 안으로 이동 - AI 티 나는 주석 정리
deploy/preview 워크플로우의 bun run build에 giscus repo-id·category-id를 GitHub Actions Variables로 넘긴다. 비밀값이 아니라 vars 사용. 관리자가 Variables만 채우면 프로덕션·프리뷰 빌드에 반영된다.
SimYunSup
changed the title
블로그 글은 DaleStudy/daleui "블로그" 카테고리 Discussion에서 오고 slug가 곧 discussion 번호다. 기존 글타래에 댓글이 달리도록 다음을 바꿨다. - repo: DaleStudy/daleui.com → DaleStudy/daleui (원본 discussion이 있는 곳) - mapping: pathname → number, term = slug(번호) - repo-id/category-id 기본값을 daleui "블로그" 카테고리 공개값으로 설정 - Giscus는 term(번호) prop을 받아 setConfig로 number를 전송 - pathnameToTerm 제거, 테스트 갱신
Comment on lines
+157
to
+159
| <Box as="section" aria-label="댓글" className={css({ mt: "48" })}> | ||
| <Giscus term={slug} /> | ||
| </Box> |
Collaborator
There was a problem hiding this comment.
giscus component lib를 사용하시는줄 알았는데 직접 구현하셨네요 특별한 이유가 있을까요?
Member
Author
There was a problem hiding this comment.
아, 예전에 만들었던 기억에 의존하다보니 있다는걸 몰랐네요 😅
리뷰 피드백 반영. 스크립트 주입·iframe 생명주기·테마/글 변경 시 setConfig 전달을 직접 재구현하던 컴포넌트를 공식 @giscus/react 래퍼로 교체. buildGiscusAttributes 등 불필요해진 코드 제거.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
개요
블로그 글 상세 페이지에 giscus 기반 댓글 기능을 추가합니다. (이슈 #57)
변경 내용
@giscus/react로 댓글 위젯 렌더링mapping=number로 원본 토론에 연결theme), 언어는kosrc/constants/giscus.ts에 하드코딩